<template>
  <!-- 详情 -->
  <el-dialog
    :visible.sync="dialogVisible"
    width="1100px"
    append-to-body
    title="公路理货报告提运单详情"
    :close-on-click-modal="false"
    :before-close="closedialog"
    class="self-dialog"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-descriptions :column="2" border>
          <el-descriptions-item>
            <template slot="label"> 货物运输批次号 </template>
            {{ form.manifestId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 申报运输方式 </template>
            {{ form.transportMode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 进出境标志 </template>
            <dict-tag
              :options="dict.type.mft_ieport_type"
              :value="form.iEFlag"
            ></dict-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 运输方式代码 </template>
            {{ form.declTrafMode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 进出境海关代码 </template>
            {{ form.ieCustomsCode }}-
            <dict-value :list="customsList" :dictCode="form.ieCustomsCode" label="customsName" value="customsCode"></dict-value>
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label"> 申报报文编号 </template>
            {{ form.msgId }}
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label"> 提运单号 </template>
            {{ form.billNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 理货部门代码 </template>
            {{ form.talPartyId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 理货责任人名称 </template>
            {{ form.talMasterName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 装货地代码 </template>
            {{ form.loadCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 卸货地代码 </template>
            {{ form.unloadCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 装卸开始时间 </template>
            {{ form.talBeginDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 装卸结束时间 </template>
            {{ form.talEndDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 理货状态标志 </template>
            {{ form.talMark }}
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label"> 发送方代码 </template>
            {{ form.senderCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 报文发送时间 </template>
            {{ form.sendMsgDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 接收方代码 </template>
            {{ form.receiverCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 报文接收时间 </template>
            {{ form.recvMsgDate }}
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label"> 创建人 </template>
            {{ form.createBy }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 创建时间 </template>
            {{ form.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 审核人 </template>
            {{ form.auditEr }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 审核时间 </template>
            {{ form.auditDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 备注 </template>
            {{ form.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="提单信息" name="second">
        <el-table
          :data="form.talRoadList"
          size="mini"
          style="width: 100%"
          border
        >
          <!-- <el-empty slot="empty" :image="require('@/assets/images/empty.png')" :image-size="80"></el-empty> -->
          <el-table-column type="index" label="序号" align="center" width="100">
          </el-table-column>
          <el-table-column
            prop="billNo"
            label="提(运)单号"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="packNo"
            label="货物总件数	"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="grossWt"
            label="货物总毛重(KG)	"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="wrapType"
            label="包装种类"
            align="center"
            min-width="150"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.custom_wrap_type"
                :value="scope.row.wrapType"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="volume"
            label="货物体积(m³)	"
            align="center"
            min-width="150"
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="集装箱信息" name="third">
        <el-table
          :data="form.talRoadContaList"
          size="mini"
          style="width: 100%"
          border
        >
          <!-- <el-empty slot="empty" :image="require('@/assets/images/empty.png')" :image-size="80"></el-empty> -->
          <el-table-column type="index" label="序号" align="center" width="100">
          </el-table-column>
          <el-table-column
            prop="contaId"
            label="集装箱(器)编号"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="damageNote"
            label="集装箱(器)残损说明"
            align="center"
            min-width="150"
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="closedialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMftTalRoadList } from "@/api/swdecl/mftTalHead";
export default {
  props: {
    detailId: {},
    dict: {},
    customsList: {
      type: Array,
    },
  },
  data() {
    return {
      //显示详情
      dialogVisible: false,
      form: {},
      activeName: "first",
    };
  },
  watch: {
    detailId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.loadDetail();
        }
      },
    },
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    closedialog() {
      this.activeName = "first";
      this.dialogVisible = false;
    },
    // 获取详情
    loadDetail() {
      const id = this.detailId;
      getMftTalRoadList(id).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
  },
};
</script>

<style>
</style>
